<!-- @format -->

<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud
      :options="options"
      :columns="columns"
      ref="crudRef"
      tableRef="tableRefx"
    >
      <template #operationBeforeExtend="{ record }">
        <a-popconfirm @ok="detailcel(record)" content="是否确认取消此提单?">
          <a-link
            v-if="
              record.deriver_pick_status != 4 && record.deriver_pick_status != 3
            "
            v-auth="['prediction:deriverOrder:cancelOrder']"
            >取消</a-link
          >
        </a-popconfirm>
        <a-link
          @click="detailList(record)"
          v-if="record.deriver_pick_status != 3"
          v-auth="['prediction:deriverOrderDetail:index']"
          >提单明细</a-link
        >
        <a-link
          @click="openPaiSong(record)"
          v-if="record.pick_type == 2 || record.pick_type == 4"
          >打印派送单</a-link
        >
        <a-link
          @click="opentiHuo(record)"
          v-if="record.pick_type == 1 || record.pick_type == 3"
          >打印提货单</a-link
        >
        <!-- <a-link @click="openPicList(record)" v-if="record.deriver_pick_status != 3" > 打印</a-link> -->
        <a-link
          @click="openPicListcmt(record)"
          v-if="record.deriver_pick_status != 3"
          v-auth="['prediction:printLog:getNo']"
          >打印出门条({{ record.pcount }})</a-link
        >
      </template>
      <template #dept_id="{ record }">
        <a-tooltip :content="record.dept.name">
          <div class="ellipsis">{{ record.dept.name }}</div>
        </a-tooltip>
      </template>
    </ma-crud>
    <a-drawer
      :footer="false"
      :width="1400"
      v-model:visible="visibleDeriverOrderDetail"
    >
      <template #title> 提单明细 </template>
      <deriverorderdetail ref="deriverOrderDetailRef" />
    </a-drawer>
    <a-drawer
      :footer="false"
      :width="1400"
      v-model:visible="visibleDeriverOrderDetail2"
    >
      <template #title> 提单明细 </template>
      <deriverorderdetail2 ref="deriverOrderDetailRef2" />
    </a-drawer>
    <!-- 打印出门条 - 普通类型、精准类型 -->
    <a-modal
      v-model:visible="showModle_cmt"
      width="auto"
      title="威斯腾物流园"
      ok-text="打印"
      :footer="false"
    >
      <div
        style="
          display: flex;
          width: 100%;
          padding: 0 36px;
          box-sizing: border-box;
        "
      >
        <div style="margin-right: 12px; flex: 1">
          <a-form-item label="发货人">
            <a-input v-model="fahuoname" placeholder="请输入发货人" />
          </a-form-item>
        </div>
        <div style="flex: 1">
          <a-form-item label="提货人">
            <a-input v-model="tihuoname" placeholder="请输入提货人" />
          </a-form-item>
        </div>
      </div>
      <div
        style="
          display: flex;
          width: 100%;
          padding: 0 36px;
          box-sizing: border-box;
        "
      >
        <div style="margin-right: 12px; flex: 1">
          <a-form-item label="提货单位">
            <a-input v-model="tihuodanwei" placeholder="请输入提货单位" />
          </a-form-item>
        </div>
        <div style="flex: 1">
          <a-form-item label="提货日期">
            <a-date-picker show-time format="YYYY-MM-DD HH:mm" @ok="onOk" />
          </a-form-item>
        </div>
      </div>

      <div
        style="width: 210mm; padding: 5mm 36px; box-sizing: border-box"
        id="crudContent_cmt"
      >
        <div
          style="
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            position: relative;
          "
        >
          <div>
            <div style="font-size: 14px; text-align: center">
              天一集团威斯腾物流
            </div>
            <div style="font-size: 24px; text-align: center">
              物 资 出 门 证
            </div>
          </div>
          <div
            style="
              position: absolute;
              right: 6px;
              top: 50%;
              transform: translateY(-50%);
            "
          >
            <div style="display: flex; align-items: center; font-size: 18px">
              <div style="font-weight: 600">NoA：</div>
              <div style="width: 80px; color: red">{{ no }}</div>
            </div>
            <div style="display: flex; align-items: center; font-size: 18px">
              <div style="font-weight: 400">车牌号：</div>
              <div style="width: 80px">
                <span style="font-size: 15px">{{ datas.deriver_car_no }}</span>
              </div>
            </div>
            <!-- <div style="display:flex;align-items: center;font-size:18px;">
              <div style="font-weight: 400;">订单号：</div>
              <div ><span style="font-size:15px;">{{ order_noe }}</span></div>
            </div> -->
          </div>
          <div style="position: absolute; left: 0px; top: 0">
            <div>
              <span style="font-size: 18px; color: red">{{ order_noe }}</span>
            </div>
          </div>
        </div>
        <div
          style="
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
          "
        >
          <div>提货单位：{{ tihuodanwei }}</div>
          <div>装车时间：{{ zhuangcheTime }}</div>
          <div>打印时间：{{ tihuoTime }}</div>
        </div>
        <div style="display: flex; width: 100%; flex-direction: column">
          <div style="flex: 1; margin-bottom: 10px">
            <div style="" class="table">
              <table
                style="width: 100%"
                v-if="datas?.pick_type == 1 || datas?.pick_type == 2"
              >
                <tr style="display: flex">
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>车号</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>物资名称</div>
                  </td>

                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>件数</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>重量</div>
                  </td>
                  <td
                    style="
                      width: calc((100% / 9));
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>备注</div>
                  </td>
                </tr>
                <tr
                  v-for="(item, index) in datas.detail"
                  :key="index"
                  style="display: flex"
                >
                  <!-- <td style="flex:1;display:flex;justify-content: center;align-items: center;min-height:53px"><div>{{ item.order_no }}</div></td> -->
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.prediction.car_no }}</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.prediction.goods_name }}</div>
                  </td>

                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.pick_number }}</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ (item.pick_weight - 0).toFixed(3) }}</div>
                  </td>
                  <td
                    style="
                      width: calc((100% / 9));
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <!-- <div>{{ item.prediction.remark }}</div> -->
                  </td>

                  <!-- <td v-if="item.prediction.transport_type == 2"  style="flex:1;display:flex;justify-content: center;align-items: center;"><div>{{ item.pick_weight }}</div></td> -->
                </tr>
              </table>
              <table
                style="width: 100%"
                v-if="datas?.pick_type == 3 || datas?.pick_type == 4"
              >
                <tr style="display: flex">
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>车号</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>物资名称</div>
                  </td>

                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>仓库</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>产地</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>件数</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                    "
                  >
                    <div>重量</div>
                  </td>
                </tr>
                <tr
                  v-for="(item, index) in datas.detail"
                  :key="index"
                  style="display: flex"
                >
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.wareuserdetail.car_no }}</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.wareuserdetail.goods_name }}</div>
                  </td>

                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>
                      {{
                        item.wareuserdetail.warehouse_log_chu?.warehouse.name
                      }}/{{
                        item.wareuserdetail.warehouse_log_chu
                          ?.horizontal_position
                      }}-{{
                        item.wareuserdetail.warehouse_log_chu?.release_position
                      }}-{{
                        item.wareuserdetail.warehouse_log_chu?.reaches_position
                      }}
                    </div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.wareuserdetail.producer }}</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ item.pick_number }}</div>
                  </td>
                  <td
                    style="
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      min-height: 32px;
                    "
                  >
                    <div>{{ (item.pick_weight - 0).toFixed(3) }}</div>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <div
            style="
              display: flex;
              align-items: center;
              line-height: 14px;
              margin-bottom: 10px;
              justify-content: center;
            "
          >
            <div>①</div>
            <div>（</div>
            <div>白</div>
            <div>）</div>
            <div>威</div>
            <div>斯</div>
            <div>腾</div>
            <div>留</div>
            <div>底</div>
            <div style="width: 4px"></div>
            <div>②</div>
            <div>（</div>
            <div>红</div>
            <div>）</div>
            <div>随</div>
            <div>车</div>
            <div>留</div>
            <div>存</div>
            <div style="width: 4px"></div>
            <div>③</div>
            <div>（</div>
            <div>黄</div>
            <div>）</div>
            <div>门</div>
            <div>卫</div>
            <div>留</div>
            <div>底</div>
          </div>
        </div>

        <div style="display: flex; margin-bottom: 10px">
          <div style="flex: 1">发货人：{{ fahuoname }}</div>
          <div style="flex: 1">提货人：{{ tihuoname }}</div>
          <div style="flex: 1">制单人：{{ user.nickname }}</div>
          <div>复打次数：{{ pcount }}</div>
        </div>
        <!-- <div style="text-align: center;">(第一联留存联，第二联客户联，第三联提货联)</div> -->
      </div>

      <div
        style="display: flex; margin-bottom: 10px"
        v-if="old_no != '0000000'"
      >
        <div style="width: 100px">作废原因：</div>
        <a-textarea
          placeholder="请输入作废原因"
          @focus="handleFocus"
          v-model="remark"
          allow-clear
          :error="errFalg"
        />
      </div>
      <div style="display: flex; justify-content: flex-end">
        <div v-if="old_no != '0000000'">
          <a-button v-print="printObjcmt" type="primary" v-if="remark"
            >打印</a-button
          >
          <a-button type="primary" v-if="!remark" @click="handlePrint"
            >打印</a-button
          >
        </div>
        <div v-if="old_no == '0000000'">
          <a-button v-print="printObjcmt" type="primary">打印</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 打印出门条 - 集装箱类型 -->
    <a-modal
      v-model:visible="showModle_cmtjzx"
      width="auto"
      title="威斯腾物流园"
      ok-text="打印"
      :footer="false"
    >
      <cmtjzx
        :row="rowData"
        :no="no"
        :remark="jzxPop.remark"
        :errFalg="jzxPop.errFalg"
        :old_no="old_no"
        :tihuoTime="tihuoTime"
        @bianhua="handleBian"
        @gengxin="handleEmit"
      ></cmtjzx>
    </a-modal>
    <!-- 打印派送单 -->
    <a-modal
      v-model:visible="paiSongShow"
      width="auto"
      title="打印派送单"
      ok-text="打印"
      :footer="false"
    >
      <paisong :row="paiSongList" :user="user" v-if="paiSongShow"></paisong>
    </a-modal>
    <!-- 打印派送单 -->
    <a-modal
      v-model:visible="tiHuoShow"
      width="auto"
      title="打印提货单"
      ok-text="打印"
      :footer="false"
    >
      <tihuo :row="tiHuoList" :user="user" v-if="tiHuoShow"></tihuo>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
import { Message } from "@arco-design/web-vue";
import tool from "@/utils/tool";
import { useUserStore } from "@/store";

import * as common from "@/utils/common";
import deriverorderdetail from "@/views/prediction/deriverOrderDetail/indexJzx.vue";
import deriverorderdetail2 from "@/views/prediction/deriverOrderDetail/index.vue";
import cmtjzx from "./cmt_jzx.vue";
import paisong from "@/components/paisong/index.vue";
import tihuo from "@/components/tihuo/index.vue";
const crudRef = ref();
const order_id = ref();
const inforow = ref();
const no = ref();
const tihuoname = ref();
const fahuoname = ref();
const tihuoTime = ref();
const zhuangcheTime = ref();
const tihuodanwei = ref();
const pcount = ref();
const visibleDeriverOrderDetail = ref();
const visibleDeriverOrderDetail2 = ref();
const deriverOrderDetailRef = ref();
const deriverOrderDetailRef2 = ref();
const showModle = ref(false);
const showModle_cmt = ref(false);
const showModle_cmtjzx = ref(false);
const paiSongList = ref([]);
const paiSongShow = ref(false);
const tiHuoList = ref([]);
const tiHuoShow = ref(false);
const userStore = useUserStore();
const order_noe = ref();
const rowData = ref({});
// 当前登录的用户所有信息，包括 id 用户名 昵称 等信息
const user = userStore.user;
let newData = "";
let datas = [];
const old_no = ref();
const remark = ref();
const errFalg = ref(false);
const jzxPop = ref({});
const crudContent = ref();
jzxPop.value = {
  errFalg: false,
  remark: ""
};
const printObj = {
  id: "crudContent",
  popTitle: "页面打印"
};
const printObjcmt = {
  id: "crudContent_cmt",
  popTitle: "页面打印",
  openCallback(vue) {
    showModle_cmt.value = false;
    predictionDeriverOrder
      .getprintSave({ type: 2, link_id: datas.id, remark: remark.value })
      .then((res) => {
        crudRef.value.refresh();
      });
  }
};
const openPaiSong = (item) => {
  // 打印派送单
  item.detail.map((v, i) => {
    if (v.prediction_id == 0) {
      v.prediction = v.wareuserdetail;
    }
  });
  paiSongList.value = item;
  paiSongShow.value = true;
};
const opentiHuo = (item) => {
  // 打印提货单
  item.detail.map((v, i) => {
    if (v.prediction_id == 0) {
      v.prediction = v.wareuserdetail;
    }
  });
  tiHuoList.value = item;
  tiHuoShow.value = true;
};
const handleBian = (obj) => {
  jzxPop.value.errFalg = obj.errFalg;
  jzxPop.value.remark = obj.remark;
};
const handleEmit = () => {
  crudRef.value.refresh();
};
const handleFocus = () => {
  errFalg.value = false;
};
const handlePrint = () => {
  if (!remark.value) {
    Message.error("请输入作废原因");
    errFalg.value = true;
  }
};
const detailcel = (row) => {
  // 取消
  predictionDeriverOrder.getcancelOrder({ id: row.id }).then((res) => {
    if (res.code == 200) {
      Message.success("取消成功！");
      crudRef.value.refresh();
    }
  });
};
const detailList = (row) => {
  console.log("row:", row);
  if (row.pick_type == 1 || row.pick_type == 2) {
    if (row.transport_type == 1) {
      let is_taoxiang = 0;
      row.detail.map((v, i) => {
        is_taoxiang = v.prediction.box.is_taoxiang;
      });
      row.is_taoxiang = is_taoxiang;
      visibleDeriverOrderDetail.value = true;
      deriverOrderDetailRef.value.open(row, row);
    } else {
      visibleDeriverOrderDetail2.value = true;
      deriverOrderDetailRef2.value.open(row, row);
    }
  }
  if (row.pick_type == 3 || row.pick_type == 4) {
    if (row.transport_type == 2) {
      visibleDeriverOrderDetail2.value = true;
      deriverOrderDetailRef2.value.open(row, row);
    } else if (row.transport_type == 1) {
      let is_taoxiang = 0;
      row.detail.map((v, i) => {
        is_taoxiang = v.wareuserdetail.box.is_taoxiang;
      });
      row.is_taoxiang = is_taoxiang;
      visibleDeriverOrderDetail.value = true;
      deriverOrderDetailRef.value.open(row, row);
    }
  }
  inforow.value = row;
};
const onOk = (dateString, date) => {
  tihuoTime.value = dateString;
};
const openPicList = (row) => {
  newData = tool.dateFormat(
    Math.round(new Date().getTime() / 1000).toString(),
    "yyyy-MM-dd hh:mm:ss"
  );

  datas = row;
  inforow.value = datas;
  showModle.value = true;

  // })
};
const openPicListcmt = (row) => {
  // if(row.deriver_pay_status == 0){
  // 	return Message.error('该账单还未支付')
  // }
  let arr = [];
  let number = 0;
  let weight = 0;
  let obj = JSON.parse(JSON.stringify(row));
  obj.detail.map((v, i) => {
    v.order_no = obj.order_no;
    number += obj.detail[i].pick_number - 0;
    weight += obj.detail[i].pick_weight - 0;
  });
  number = number;
  weight = weight.toFixed(3);
  if (row.pick_type == 1 || row.pick_type == 2) {
    obj.detail.push({
      prediction: {
        car_no: "合计",
        goods_name: "",
        remark: "",
        box: "",
        box_type: ""
      },
      pick_number: number,
      pick_weight: weight
    });
  } else if (row.pick_type == 3 || row.pick_type == 4) {
    obj.detail.push({
      wareuserdetail: {
        car_no: "合计",
        goods_name: "",
        box: "",
        box_type: "",
        warehouse: { name: "" },
        horizontal_position: "",
        release_position: "",
        reaches_position: ""
      },
      pick_number: number,
      pick_weight: weight
    });
  }

  datas = obj;
  predictionDeriverOrder
    .getGerNo({
      driver_order_id: obj.id
    })
    .then((res) => {
      no.value = res.data.no;
      old_no.value = res.data.old_no;
      fahuoname.value = row.create_user?.nickname;
      tihuoname.value = row.deriver_name;
      tihuodanwei.value = row.dept.name;
      pcount.value = row.pcount;
      tihuoTime.value = tool.dateFormat(
        Math.round(new Date().getTime() / 1000).toString(),
        "yyyy-MM-dd hh:mm:ss"
      );
      zhuangcheTime.value = row.created_at;
      if (datas.porder.transport_type == 1) {
        let boxArr = [];
        let box_typeArr = [];
        let taoxiang = 0;
        let ticket_number = "";
        row.detail.map((v, i) => {
          if (v.prediction_id != 0) {
            console.log("box:", v.prediction.box.box);
            boxArr.push(v.prediction.box.box);
            taoxiang = v.prediction.box.is_taoxiang;
            box_typeArr.push(v.prediction.box_type);
            ticket_number = v.prediction.ticket_number;
          } else {
            boxArr.push(v.wareuserdetail.box.box);
            taoxiang = v.wareuserdetail.box.is_taoxiang;
            box_typeArr.push(v.wareuserdetail.box_type);
            ticket_number = v.wareuserdetail.ticket_number;
          }
        });
        row.boxs = boxArr.join(",");
        row.box_types = box_typeArr.join(",");
        row.ticket_number = ticket_number;
        rowData.value = row;
        if (taoxiang == 0) {
          showModle_cmtjzx.value = true;
        } else {
          showModle_cmt.value = true;
          remark.value = "";
        }
      } else {
        showModle_cmt.value = true;
        remark.value = "";
      }
    });
  inforow.value = datas;
  console.log(inforow.value);
};

// 暴露方法
const open = (row) => {
  order_id.value = row.id;
  inforow.value = row;
  order_noe.value = row.order_no;
  crudRef.value.crudSearchRef.resetSearch();
  crudRef.value.requestData();
};

const numberOperation = (newValue, id, numberName) => {
  predictionDeriverOrder
    .numberOperation({ id, numberName, numberValue: newValue })
    .then((res) => {
      res.success && Message.success(res.message);
    })
    .catch((e) => {
      console.log(e);
    });
};

const switchStatus = (statusValue, id, statusName) => {
  predictionDeriverOrder
    .changeStatus({ id, statusName, statusValue })
    .then((res) => {
      res.success && Message.success(res.message);
    })
    .catch((e) => {
      console.log(e);
    });
};

const options = reactive({
  id: "flyos_prediction_deriver_order",
  pk: "id",
  operationColumn: true,
  bordered: { cell: true },
  isDbClickEdit: false,
  operationWidth: 330,
  operationColumnWidth: 330,
  formOption: {
    viewType: "modal",
    width: 600
  },
  api: predictionDeriverOrder.getList,
  recycleApi: predictionDeriverOrder.getRecycleList,
  add: {
    show: false,
    api: predictionDeriverOrder.save,
    auth: ["prediction:deriverOrder:save"]
  },
  edit: {
    show: false,
    api: predictionDeriverOrder.update,
    auth: ["prediction:deriverOrder:update"]
  },
  delete: {
    show: false,
    api: predictionDeriverOrder.deletes,
    auth: ["prediction:deriverOrder:delete"],
    realApi: predictionDeriverOrder.realDeletes,
    realAuth: ["prediction:deriverOrder:realDeletes"]
  },
  recovery: {
    show: false,
    api: predictionDeriverOrder.recoverys,
    auth: ["prediction:deriverOrder:recovery"]
  },
  import: {
    show: false,
    url: "prediction/deriverOrder/import",
    templateUrl: "prediction/deriverOrder/downloadTemplate",
    auth: ["prediction:deriverOrder:import"]
  },
  export: {
    show: false,
    url: "prediction/deriverOrder/export",
    auth: ["prediction:deriverOrder:export"]
  },
  exports: {
    show: true,
    url: "prediction/deriverOrder/export",
    auth: ["prediction:deriverOrder:export"]
  },
  beforeRequest: (params) => {
    params.order = "created_at";
    params.orderType = "desc";
    params.type = 2;
    params.service_type = "3";
  },
  afterRequest: (params) => {
    params.map((v, i) => {
      v.images = v.images.split(",");
      v.detail.map((vv, ii) => {
        if (vv.prediction_id != 0) {
          vv.children = vv.prediction;
          v.service_type = vv.prediction.service_type;
        }
        if (v.warehouse_user_detail_id != 0) {
          vv.children = vv.wareuserdetail;
        }
      });
    });
  }
});

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "装车单号",
    dataIndex: "order_no",
    align: "center",
    formType: "input",
    search: true
  },
  {
    title: "提单公司",
    dataIndex: "dept_id",
    align: "center",
    formType: "input"
  },
  {
    title: "服务方式",
    dataIndex: "service_type",
    formType: "select",
    align: "center",

    search: true,
    commonRules: {
      required: true,
      message: "请输入对装类型"
    },
    dict: {
      data() {
        return [
          { label: "门到站", value: 3 },
          { label: "门到门", value: 4 }
        ];
      },
      translation: true,
      tagColors: {
        3: "blue",
        4: "blue"
      }
    }
  },
  {
    title: "订单状态",
    dataIndex: "deriver_pick_status",
    formType: "select",
    align: "center",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "请选择订单状态"
    },
    dict: {
      name: "deriver_pick_status",
      props: {
        label: "title",
        value: "key"
      },
      translation: true,
      tagColors: {
        0: "grey",
        1: "green",
        2: "blue",
        3: "grey"
      }
    }
  },
  {
    title: "司机用户",
    dataIndex: "deriver_user_id",
    align: "center",
    formType: "select",
    search: false,
    hide: true,
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: "system/user/remote",
      // 指定组件接收的props
      props: { label: "nickname", value: "id" },
      // 开启分页
      openPage: true,
      // 远程请求配置项
      remoteOption: {
        // 按用户名排序
        sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
        // 设置查询的字段
        // select: ["deriver_user_id", "nickname"],
        // 设置数据过滤as
        filter: {
          wx_user_type: ["=", 1]
        },
        // 关联模型
        relations: []
      }
    }
  },
  {
    title: "司机姓名",
    dataIndex: "deriver_name",
    formType: "input",
    align: "center",
    search: false
  },
  {
    title: "司机车牌",
    dataIndex: "deriver_car_no",
    formType: "input",
    width: 120,
    align: "center",
    search: true
  },
  {
    title: "司机手机",
    dataIndex: "deriver_mobile",
    formType: "input",
    width: 140,
    align: "center",
    search: true
  },
  {
    title: "运输类型",
    dataIndex: "transport_type",
    formType: "select",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "请输入运输类型"
    },
    dict: {
      name: "transport_type",
      props: {
        label: "title",
        value: "key"
      },
      translation: true,
      tagColors: {
        1: "#f53f3f",
        2: "#7816ff",
        3: "#00b42a",
        4: "#165dff"
      }
    }
  },
  {
    title: "下装车单人员",
    dataIndex: "create_user.nickname",
    formType: "input",
    width: 120,
    align: "center"
    // search: true,
  },
  {
    title: "装车图片",
    dataIndex: "images",
    formType: "upload",
    width: 160,
    align: "center"
  },
  {
    title: "装车时间",
    dataIndex: "created_at",
    width: 180,
    formType: "range",
    search: true,
    addDisplay: false,
    align: "center",
    editDisplay: false,
    sortable: {
      sortDirections: ["ascend", "descend"],
      sorter: true
    },
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "创建人",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新人",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
]);
defineExpose({ open });
</script>
<style>
.table,
th,
tr,
td {
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.table {
  border-top: 1px solid rgba(0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0);
  width: 100%;
}

.table td {
  padding: 6px 10px;
  word-break: break-all;
  word-wrap: break-word;
}

.table tr td {
  border-right: 1px solid rgba(0, 0, 0);
  border-bottom: 1px solid rgba(0, 0, 0);
}
.arco-picker-size-medium {
  flex: 1;
}
</style>
<script>
export default { name: "send:deriverOrder" };
</script>
